import React from 'react';
import { observer } from 'mobx-react';
import { Checkbox } from 'antd';

interface Props {
    value?: string;
    onChange: (string) => void;
    renderDisabled?: Function;
    linkedFields?: string[];
    row: any;
    column?;
    editable?: boolean;
}

@observer
export default class CheckboxCom extends React.Component<Props, any> {
    constructor(props){
        super(props);
        const { column, row } = props;
        this.state={hide:column&&column.isHide&&column.isHide(row)};
    }
    componentDidMount() {
        const { row, linkedFields = [] } = this.props;
        linkedFields.map(f => {
            row.has(f) && row.$(f).set('disabled', !this.props.value || this.props.value != '1');
        });
    }

    checkChange= (e) => {
        // const {column,row}= this.props;
        this.props.onChange(e.target.checked ? '1' : '0');
        // if(column.onChange&&!column.onChange(e.target.checked ? '1' : '0',row)){
        //     //return;
        // }
        setTimeout(() => {
            const { row, linkedFields = [] } = this.props;
            linkedFields.map(f => {                            
                row.has(f) && row.$(f).set('disabled', !e.target.checked);
            });
        }, 10);
    }

    render() {
        const {value}= this.props;
        return (
            <div style={this.state.hide?{display:"none"}:{display:"block"}}>
                { this.props.editable ? <Checkbox
                        {...this.props}
                        checked={this.props.value == '1'}
                        disabled={this.props.renderDisabled && this.props.renderDisabled()}
                        onChange={this.checkChange}
                    />
                    : <span>{value}</span>
                }
            </div>
        )
    }

}